<script setup>
  import { unref, defineEmits, defineProps, computed } from 'vue';
  const emits = defineEmits(['on-btn-click']);
  const props = defineProps({
    showTitle: {
      type: Boolean,
      default: true
    },
    showLine: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '筛选条件'
    },
    textAlign: {
      type: String,
      default: 'left'
    },
    btnList: {
      type: Array,
      default: () => {
        return [
          {
            label: '新增',
            action: 'add',
            icon: 'bdyj-xinzeng',
            img: require('@/assets/img/button/button_add.png')
          },
          {
            label: '删除',
            action: 'delete',
            icon: 'bdyj-shanchu',
            img: require('@/assets/img/button/button_delete.png')
          }
        ];
      }
    }
  });
  const getFlexDirection = computed(() => (props.textAlign === 'left' ? 'row' : 'row-reverse'));
  function onBtnClick(item) {
    const loading = ElLoading.service({
      lock: true,
      spinner: 'NstdIcon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    });
    setTimeout(() => {
      emits('on-btn-click', unref(item));
      loading.close();
    }, 0);
  }
</script>
<template>
  <div
    :class="{ 'nc-btn-container': true, 'border-line': props.showLine }"
    :style="'flex-direction:' + getFlexDirection"
  >
    <header v-if="props.showTitle" class="m--title-line">
      <div class="nc-line"></div>
      <h4>{{ props.title }}</h4>
    </header>
    <div class="nc-btn-wrapper">
      <slot name="before" />
      <div v-for="(item, index) in props.btnList" @click="onBtnClick(item)" :key="index + item.action">
        <NstdUpload
          v-if="item.action && item.action === 'import'"
          action="#"
          :show-file-list="false"
          :before-upload="beforeUpload"
        >
          <div class="nc-btn-item">
            <div class="nc-btn-item-icon">
              <div class="nc-btn-item-icon">
                <SvgIcon class="mr-5px w-16px h-16px" :color="`${item.color}`" :name="`${item.iconName}`" />
              </div>
            </div>
            <span class="nc-btn-item-label">{{ item.label }}</span>
          </div>
        </NstdUpload>
        <div class="nc-btn-item" v-else>
          <div class="nc-btn-item-icon">
            <SvgIcon class="mr-5px w-16px h-16px" :color="`${item.color}`" :name="`${item.iconName}`" />
          </div>
          <span class="nc-btn-item-label">{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  $dialog-scrollbar-color: #999999;
  $second-background-color: #fff;
  $third-default-top-text-color: #666666;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    padding: 0;
    margin: 0;
  }
  .border-line {
    //border-bottom: 2px solid rgb(6, 153, 121);
    border-bottom: 2px solid $dialog-scrollbar-color;
  }
  .nc-btn-container {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    .m--title-line {
      display: flex;
      align-items: center;
      .nc-line {
        margin-right: 10px;
        height: 24px;
        width: 6px;
        background-color: $dialog-scrollbar-color;
      }
    }
    .nc-btn-wrapper {
      display: flex;
      .nc-btn-item {
        cursor: pointer;
        padding: 4px 5px;
        margin-left: 8px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $second-background-color;
        line-height: 1;
        //background: @default-background-color;
        border: 1px solid #f2f2f2;
        border-radius: 3px;
        &:hover {
          border: 1px solid #b7d2ff;
          color: #000000;
          background: #eaf2ff;
          .nc-btn-item-label {
            color: #000000;
          }
        }
        .nc-btn-item-label {
          color: $third-default-top-text-color;
          margin-left: 5px;
          font-size: 12px;
          font-weight: 500;
          //line-height: 22px;
        }
        .nc-btn-item-icon {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
</style>
